<html>
<head>
<wicket:head>
<script>
	$(document).ready(function(){
		$("#openForm").toggle(
				function(){$("#proformdiv").slideDown();},
				function(){$("#proformdiv").slideUp();}
		);

		if($("#isCurrent").is(":checked")){
			$("#showPresent").show();
			$("#dateTo").hide();
		}
		
		$("#isCurrent").click(function(){
			if($(this).is(":checked")){
				$("#showPresent").show();
				$("#dateTo").hide();
			}else{
				$("#showPresent").hide();
				$("#dateTo").show();
			}
		});
		
	});
</script>
</wicket:head>
</head>
<body>
<wicket:panel>
	<div style="margin:10px;">
		<div class="clearfix">
			<div style="width:200px; background:#DEDDEF;float:right; font-weight:bold;padding:3px 10px;margin:5px;"><a id="openForm" href="#"><span wicket:id="addMore1">+ Add More Positions</span><span wicket:id="addMore2">+ Add More Degrees</span></a></div>
		</div>
		<div wicket:id="proformdiv" style="margin-bottom:10px;">
		   <!-- FORM -->
           <form wicket:id="proform">
               <fieldset style="border:1px solid #DEDDEF;padding:10px;">
               <legend style="color:#999;font-size:12px;">&nbsp;<span wicket:id="legend1">Professional Details</span><span wicket:id="legend2">Educational Details</span>&nbsp;</legend>
               <div>
                   <h4 style="color:#999;"><span wicket:id="ttlph1">Position Name / Title</span><span wicket:id="ttlph2">Degree / certification Name</span></h4>
                   <input wicket:id="title" type="text" style="width:600px;margin:3px 0px 10px 10px;"/>
               </div>
               <div wicket:id="splInCont">
                   <h4 style="color:#999;"><span>Specialization / Subjects</span></h4>
                   <input wicket:id="splIn" type="text" style="width:600px;margin:3px 0px 10px 10px;"/>
               </div>
               <div>
                   <h4 style="color:#999;"><span wicket:id="orgph1">Organization</span><span wicket:id="orgph2">University / School / Institute</span></h4>
                   <input wicket:id="org" type="text" style="width:600px;margin:3px 0px 10px 10px;"/>
               </div>
               <div>
                   <h4 style="color:#999;">Duration</h4>
                   <div style="margin-left:20px;margin:10px;">
                       <span style="color:#999; font-weight:bold;">From&nbsp;</span>
                       <span wicket:id="dateFrom">from date</span>
                       <span style="color:#999; font-weight:bold;">&nbsp;To&nbsp;</span>
                       <span wicket:id="dateTo">to date</span>
                       <input id="showPresent" type="text" disabled="disabled" style="display:none;" value="Present"/>
                       <input wicket:id="isCurrent" type="checkbox" />
                       <span style="margin-left:5px;"><span wicket:id="currentph1">This is my current position.</span><span wicket:id="currentph2">Currently pursuing.</span></span>
                   </div>
               </div>
               <div>
                   <h4 style="color:#999;margin-top:20px;"><span wicket:id="summ1">Work Description / Achievements / Summary</span><span wicket:id="summ2">Learnings / Achievements / Summary</span></h4>
                   <div style="margin:3px 0px 10px 10px;">
                   		<textarea wicket:id="desc" style="width:600px; height:200px;"></textarea>
                   </div>
               </div>
               <div>
               	<div style="float:right; margin:10px"><button type="submit" class="es-button ui-state-default ui-corner-all">Update</button></div>
               </div>
               </fieldset>
           </form>
		</div>
		
		<!-- Listing -->
		<div style="width:700px;">
            <!-- repeater -->
            <div class="es-text" style="margin:10px 5px;" wicket:id="prodetailList">
            	<div class="es-softCornerAll" style="padding: 10px 0px 20px 20px;" wicket:id="proDetCont">
	            	<div class="clearfix es-softCornerAll" style="background-color:#DEDDEF; margin-right:10px;">
	            		<div style="font-size:16px; margin:3px;float:left;" wicket:id="positionTitle">Assistant Professor</div>
	            		<div style="float:right; padding: 5px 10px;">[<a href=# wicket:id="edit">Edit</a>&nbsp;|&nbsp<a wicket:id="delete" href="#">Delete</a>]</div>
	            	</div>
	                <div style="margin-left:20px;">
		                <div style="color:#444; margin:3px;font-size:14px;" wicket:id="orgName">Istitute of technology, ad</div>
		                <div style="color:#999; margin:3px;font-size:12px;"><span wicket:id="fromDate">May, 2001</span> &mdash; <span wicket:id="toDate">June, 2010</span></div>
		                <div style="padding-left:10px; margin:3px;" wicket:id="description">sdsd</div>
	                </div>
	            </div>
            </div>
        </div>
		
	</div>
</wicket:panel>
</body>
</html>